<template>
  <div :id="id" :ref="refValue"></div>
</template>

<script>
import "xgplayer";
import Music from "xgplayer-music";
export default {
  name: "XgAudioPlayer",
  props: {
    id: {
      type: Number,
      default: "audio-player",
    },
    refValue: {
      type: String,
      default: "audio-player",
    },
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 50,
    },
    // audioArr: {
    //   required: true,
    //   type: Array,
    // },
    poster: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      player: undefined,
    };
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      if (this.player) {
        this.player.destroy(true);
      }
      this.player = new Music({
        id: this.id,
        // url: this.audioArr,
        volume: 0.9,
        width: this.width,
        height: this.height,
        poster: this.poster,
      });
      this.player.on("play", () => {
        this.$emit("onPlay", { player: this.player });
      });
      this.player.on("pause", () => {
        this.$emit("onPause", { player: this.player });
      });
      this.player.on("playing", () => {
        this.$emit("onPlaying", { player: this.player });
      });
      this.player.on("ended", () => {
        this.$emit("onEnded", { player: this.player });
      });
    },
  },
  watch: {
    audioArr: {
      handler(newVal, oldVal) {
        this.initPlayer();
      },
      deep: true,
      immediate: false,
    },
  },
};
</script>

<style scoped>
</style>
